import Tooltip from 'antd/es/tooltip';
import 'antd/es/tooltip/style/css';
import style from './index.module.scss';
import React from 'react';
import { isNaN, isNumber } from 'lodash';
import { IParamModelLiteData } from '@manycore/pages-vm-api';
import InputNumber from 'antd/es/input-number';
import 'antd/es/input-number/style/css';
import InputNew from 'antd/es/input';

export interface IFieldChange {
  onChange?: (value?: string | number) => void;
}

export interface IInputProps extends IFieldChange {
  field: IParamModelLiteData;
}

export function Input(props: IInputProps) {
  const { field, onChange } = props;
  let defaultInput = (
    <InputNew
      size="small"
      onChange={(e) => onChange && onChange(e.target.value as string)}
      placeholder="..."
      className={style.formFiledItem}
      value={field.value as string}
    />
  );

  let title: string | undefined;

  if (['float', 'int'].includes(field.type)) {
    let max: number | undefined = undefined;
    let min: number | undefined = undefined;
    if (isNumber(field.max) && !isNaN(field.max)) {
      max = field.max;
    }
    if (isNumber(field.min) && !isNaN(field.min)) {
      min = field.min;
    }
    if (isNumber(max) && isNumber(min)) {
      title = `区间 ${min}-${max}`;
    }

    defaultInput = (
      <InputNumber
        className={style.formFiledItem}
        size="small"
        min={min}
        max={max}
        step={field.step}
        placeholder={'...'}
        value={field.value as number}
        onChange={(value) => onChange && onChange(value!)}
      />
    );
  }

  if (title) {
    return (
      <Tooltip title={title} trigger="hover" placement="left">
        {defaultInput}
      </Tooltip>
    );
  }

  return defaultInput;
}
